<div class="modal-header">
    <h3 class="modal-title">Add employee</h3>
</div>
<div class="modal-body">
    <form name="addEmpForm" role="form" novalidate>

    	<div class="form-group" ng-class="{ 'has-error': addEmpForm.name.$invalid }">
    		<label for="name">First Name</label>
    		<input type="text" id="name" class="form-control" name="name" placeholder="First Name" ng-model="empModel.FirstName" ng-pattern="nameRegex" required>
            <p class="help-block" ng-if="addEmpForm.name.$error.required">The first name is required</p>
            <p class="help-block" ng-if="addEmpForm.name.$error.pattern">The first name has incorrect format. Allowed only letters, digits, spacing and underscore</p>
    	</div>

        <div class="form-group" ng-class="{ 'has-error': addEmpForm.lastName.$invalid }">
            <label for="lastName">Last Name</label>
            <input type="text" id="lastName" class="form-control" name="lastName" placeholder="Last name" ng-model="empModel.LastName" ng-pattern="nameRegex" required>
            <p class="help-block" ng-if="addEmpForm.lastName.$error.required">The last name is required</p>
            <p class="help-block" ng-if="addEmpForm.lastName.$error.pattern">The last name has incorrect format. Allowed only letters, digits, spacing and underscore</p>
        </div>

        <div class="form-group" ng-class="{ 'has-error': addEmpForm.email.$invalid }">
            <label for="email">Email</label>
            <input type="email" id="email" class="form-control" name="email" placeholder="Email" ng-model="empModel.Email" ng-pattern="valueRegex" ng-remote-validate="api/employees/ValidateEmployeeByEmail" ng-remote-throttle="550" ng-remote-method="GET" required>
            <p class="help-block" ng-if="addEmpForm.email.$error.pattern">The value has incorrect format</p>
            <p class="help-block" ng-if="addEmpForm.email.$error.required">The value is required</p>
            <p class="help-block" ng-if="addEmpForm.email.$error.ngRemoteValidate">This email is already exist</p>
        </div>

        <div class="form-group" ng-class="{ 'has-error': addEmpForm.email.$invalid }">
            <label for="empNum">Employee number</label>
            <input type="number" id="empNum" class="form-control" name="empNum" placeholder="Employee number" ng-model="empModel.EmpNumber" min="1" max="99999" ng-remote-validate="api/employees/ValidateEmployeeByEmpNumber" ng-remote-throttle="550" ng-remote-method="GET" required>
            <p class="help-block" ng-if="addEmpForm.empNum.$error.ngRemoteValidate">This employee number is already exist</p>
            <p class="help-block" ng-if="addEmpForm.empNum.$error.required">The employee number is required</p>
        </div>

    </form>
</div>
<div class="modal-footer">
    <button class="btn btn-primary" type="button" ng-click="ok()" ng-disabled="!addEmpForm.$valid">OK</button>
    <button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>
</div>
